<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视差滚动</title>
<meta name="description" content="这是一个视觉差的演示demo" />
<meta name="keywords" content="视觉差滚动, parallax-scrolling, css, background" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
</head>

<body>
<style type="text/css">
body {position:relative;padding:0;margin:0;font-family:'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', tahoma, arial, simsun, '宋体';}
.logo {position:fixed;right:5%;top:5%;font-size:16px;text-transform:uppercase;color:#fff;opacity:0.75;}

/*.ci-page-background {
    z-index: -1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(img/TolbachikVolcano_ZH-CN8980703058_1366x768.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}*/

.ci-parallax {
    /*position: relative;*/
}
.ci-parallax .section {
    min-height: 600px;
    padding: 20px;
    color: #fff;
}
.ci-parallax .backgrounds {
    z-index: -1;
    list-style: none;
    position: fixed;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
}
.ci-parallax .backgrounds li {
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.ci-parallax .backgrounds li:nth-child(1) {
    /*background-image: url(img/TolbachikVolcano_ZH-CN8980703058_1366x768.jpg);*/
    background-color: #333;
}
.ci-parallax .backgrounds li:nth-child(2) {
    /*background-image: url(img/NorwegianFjords_ZH-CN9906772291_1366x768.jpg);*/
    background-color: #666;
}
.ci-parallax .backgrounds li:nth-child(3) {
    /*background-image: url(img/PeaceCamp_ZH-CN11336027451_1366x768.jpg);*/
    background-color: #999;
}
.ci-parallax .backgrounds li:nth-child(4) {
    /*background-image: url(img/PowellPano_ZH-CN11170060213_1366x768.jpg);*/
    background-color: #aaa;
}
.ci-parallax .backgrounds li:nth-child(5) {
    /*background-image: url(img/TianchiScenery_ZH-CN9945301190_1366x768.jpg);*/
    background-color: #ccc;
}

.ci-parallax .section {
    border-bottom: solid 10px #ff0000;
}
</style>
<strong class="logo">iburning<small>.com</small></strong>
<div class="ci-parallax" id="my-parallax">
    <ul class="backgrounds">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="section"><h2>SECTION 01</h2></div>
    <div class="section"><h2>SECTION 02</h2></div>
    <div class="section"><h2>SECTION 03</h2></div>
    <div class="section"><h2>SECTION 04</h2></div>
    <div class="section"><h2>SECTION 05</h2></div>
</div>

<script>
function CIParallax() {
    this.el = null;
    this.backgroundWrap = null;
    this.sections = [];
    this.sectionsHeight = [];
    this.index = 0;
    this.isDebug = false;
    this.logWarp = null;
}

CIParallax.prototype.init = function(opts) {
    var self = this;
    var el = this.el = opts.el;
    // this.sections = el.querySelectorAll('section');
    // this.sections = el.getElementsByTagName('section');
    this.backgroundWrap = el.querySelectorAll('.backgrounds')[0];
    this.backgrounds = el.querySelectorAll('.backgrounds li');
    this.sections = el.querySelectorAll('.section');
    this.render();

    // window.addEventListener('resize', function () {
    //     self.render();
    // });
    _test = self.sections[0];
    console.log('init', window.scrollY, self.sections[0].offsetHeight, window.innerHeight);

    window.addEventListener('scroll', function (evt) {
        var height = self.getCurrentHeight();
        // console.log('scroll', window.scrollY, self.index, height, window.innerHeight);
        if (window.scrollY + window.innerHeight >= height) {
            console.log(- window.scrollY, 'scroll background...');
            self.backgroundWrap.style.top = - window.scrollY + window.innerHeight * (self.index + 1) + 'px';
        }
        if (window.scrollY >= height) {
            console.log('stop scroll background');
            self.index++;
        }
    });

    if (this.isDebug) {
        var logWarp = this.logWarp = document.create
    }
};

CIParallax.prototype.render = function() {
    var W = window.innerWidth;
    var H = window.innerHeight;

    for (var i = 0; i < this.sections.length; i++) {
        this.sectionsHeight.push(this.sections[i].offsetHeight);
        var background = this.backgrounds[i];
        background.style.width = W + 'px';
        background.style.height = H + 'px';
    }
};

CIParallax.prototype.getCurrentHeight = function() {
    var height = 0;
    for (var i = 0; i <= this.index; i++) {
        height += this.sectionsHeight[i];
    }
    // console.log('getCurrentHeight', this.index, height);
    return height;
};

window.addEventListener('load', main);

function main () {
    var parallax = new CIParallax();
    parallax.init({ el: document.querySelector('#my-parallax') });
    // parallax.init({ el: document.getElementById('my-parallax') });
}


</script>
</body>
</html>